<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="龙华系统研发中心官网，提供系统研发、产品发布和个人中心等功能。">
		<title>龙华系统研发中心官网</title>
		<style>
			body {
			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
			margin: 0;
			background: linear-gradient(135deg, rgba(106, 17, 203, 0.9), rgba(37, 117, 252, 0.9));
			color: white;
			min-height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
		.container,
		.welcome-container {
			background: white;
			padding: 40px;
			border-radius: 10px;
			box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
			text-align: center;
			width: 300px;
			max-width: 90%;
			color: black;
		}
		
		h1,
		h2 {
			margin-bottom: 20px;
		}
		
		h1 {
			font-size: 24px;
		}
		
		h2 {
			font-size: 20px;
		}
		
		input,
		button {
			padding: 12px;
			width: 100%;
			border-radius: 5px;
			font-size: 16px;
			margin-top: 10px;
			box-sizing: border-box;
		}
		
		input {
			border: 1px solid #ddd;
		}
		
		input:focus {
			border-color: #007bff;
			outline: none;
		}
		
		button {
			background-color: #007bff;
			color: white;
			border: none;
			cursor: pointer;
		}
		
		button:hover {
			background-color: #0056b3;
		}
		
		.hidden {
			display: none;
		}
		
		.loader {
			margin: 20px auto;
			border: 4px solid #f3f3f3;
			border-top: 4px solid #007bff;
			border-radius: 50%;
			width: 30px;
			height: 30px;
			animation: spin 1s linear infinite;
		}
		
		@keyframes spin {
			0% {
				transform: rotate(0deg);
			}
			100% {
				transform: rotate(360deg);
			}
		}
		
		.nav {
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			margin-top: 20px;
		}
		
		.nav button {
			padding: 10px 15px;
			margin: 5px;
		}
		
		.page {
			display: none;
			margin-top: 20px;
			/* Add margin to separate pages */
		}
		
		.page.active {
			display: block;
		}
	</style>
	</head>

	<body>
		<div id="loginPage" class="container">
			<h1>登录系统</h1>
			<input type="text" id="username" placeholder="用户名" required>
			<div class="password-container" style="position: relative;">
				<input type="password" id="password" placeholder="密码" required>
				<span class="toggle-password" id="togglePassword" style="cursor: pointer; color: #007bff; position: absolute; right: 10px; top: 12px;">显示</span>
			</div>
			<button id="loginBtn">登录</button>
			<div class="message" id="message" style="color: red;"></div>
			<div class="loader hidden" id="loader"></div>
		</div>

		<div id="welcomePage" cla ss="welcome-container hidden">
			<h1>欢迎，<span id="welcomeUsername"></span>！</h1>
			<div class="nav">
				<button class="nav-btn" data-target="homePage">首页</button>
				<button class="nav-btn" data-target="aboutPage">关于我们</button>
				<button class="nav-btn" data-target="mailPage">邮件</button>
				<button class="nav-btn" data-target="profilePage">个人中心</button>
				<button class="nav-btn" data-target="productPage">产品发布</button>
				<button class="nav-btn" data-target="newsPage">新闻中心</button>
				<button class="nav-btn" data-target="settingsPage">设置</button>
			</div>
			<div class="content">
				<div id="homePage" class="page active">
					<h2>首页</h2>
					<p>欢迎来到龙华系统研发中心！</p>
				</div>
				<div id="aboutPage" class="page">
					<h2>关于我们</h2>
					<p>我们专注于技术创新与客户满意度。</p>
				</div>
				<div id="mailPage" class="page">
					<h2>邮件</h2>
					<ul>
						<li>邮件1：欢迎加入我们的团队！</li>
					</ul>
				</div>
				<div id="profilePage" class="page">
					<h2>个人中心</h2>
					<p>用户名：<span id="profileUsername"></span>
					</p>
					<p>邮箱：<span id="profileEmail"></span>
					</p>
				</div>
				<div id="productPage" class="page">
					<h2>产品发布</h2>
					<ul>
						<li>产品1：LCS_GCM</li>
					</ul>
				</div>
				<div id="newsPage" class="page">
					<h2>新闻中心</h2>
					<ul>
						<li>新闻1：公司荣获创新奖</li>
					</ul>
				</div>
				<div id="settingsPage" class="page">
					<h2>设置</h2>
					<button class="settings-btn" data-target="changePasswordPage">修改密码</button>
					<button class="settings-btn" data-target="notificationSettingsPage">通知设置</button>
					<button class="settings-btn" data-target="privacySettingsPage">隐私设置</button>

					<div id="changePasswordPage" class="page hidden">
						<h3>修改密码</h3>
						<input type="password" id="newPassword" placeholder="新密码" required>
						<button id="submitNewPasswordBtn">提交</button>
						<div id="changePasswordMessage" class="message" style="color: red;"></div>
					</div>

					<div id="notificationSettingsPage" class="page hidden">
						<h3>通知设置</h3>
						<p>选择你想接收的通知类型：</p>
						<button id="saveNotificationSettingsBtn">保存设置</button>
					</div>

					<div id="privacySettingsPage" class="page hidden">
						<h3>隐私设置</h3>
						<label>
							<input type="checkbox" checked> 允许他人查看我的资料
						</label>
						<button id="savePrivacySettingsBtn">保存设置</button>
					</div>
				</div>
			</div>
			<button id="logoutBtn">退出登录</button>
		</div>

		<script>
			const validCredentials = {
			            "钟可怡": { password: "123456", email: "3410114@LCS.com" },
			            "冯浩哲": { password: "123456", email: "3410784314@qq.com" }
			        };
			
			        const elements = {
			            loginPage: document.getElementById('loginPage'),
			            welcomePage: document.getElementById('welcomePage'),
			            usernameInput: document.getElementById('username'),
			            passwordInput: document.getElementById('password'),
			            messageBox: document.getElementById('message'),
			            loader: document.getElementById('loader'),
			            welcomeUsername: document.getElementById('welcomeUsername'),
			            profileUsername: document.getElementById('profileUsername'),
			            profileEmail: document.getElementById('profileEmail'),
			            pages: document.querySelectorAll('.page'),
			            changePasswordMessage: document.getElementById('changePasswordMessage')
			        };
			
			        // 如果用户已经登录，自动跳转到欢迎页面
			        if (localStorage.getItem('isLoggedIn') === 'true') {
			            elements.loginPage.classList.add('hidden');
			            elements.welcomePage.classList.remove('hidden');
			            const username = localStorage.getItem('username');
			            updateWelcomeInfo(username);
			        }
			
			        // 密码显示控制
			        document.getElementById('togglePassword').addEventListener('click', () => {
			            const { passwordInput } = elements;
			            passwordInput.type = passwordInput.type === 'password' ? 'text' : 'password';
			            document.getElementById('togglePassword').textContent = passwordInput.type === 'password' ? '显示' : '隐藏';
			        });
			
			        // 事件绑定
			        document.getElementById('loginBtn').addEventListener('click', handleLogin);
			        document.getElementById('logoutBtn').addEventListener('click', handleLogout);
			        document.querySelectorAll('.nav-btn').forEach(btn => btn.addEventListener('click', handlePageChange));
			        document.querySelectorAll('.settings-btn').forEach(btn => btn.addEventListener('click', handleSettingsChange));
			        document.getElementById('submitNewPasswordBtn').addEventListener('click', handleNewPassword);
			        document.getElementById('saveNotificationSettingsBtn').addEventListener('click', () => alert("通知设置已保存！"));
			        document.getElementById('savePrivacySettingsBtn').addEventListener('click', () => alert("隐私设置已保存！"));
			
			        // 登录函数
			        function handleLogin() {
			            const { usernameInput, passwordInput, messageBox, loader } = elements;
			            const username = usernameInput.value;
			            const password = passwordInput.value;
			
			            messageBox.innerHTML = '';
			            if (username.length < 3 || password.length < 6) return showMessage("用户名至少3位，密码至少6位！", "red");
			
			            loader.classList.remove('hidden');
			            setTimeout(() => {
			                if (validCredentials[username]?.password === password) {
			                    showMessage("登录成功！", "green");
			                    localStorage.setItem('isLoggedIn', 'true');
			                    localStorage.setItem('username', username);
			                    updateWelcomeInfo(username);
			                } else {
			                    showMessage("用户名或密码错误！", "red");
			                }
			                loader.classList.add('hidden');
			            }, 1000);
			       }
			
			        // 登出函数
			        function handleLogout() {
			            localStorage.removeItem('isLoggedIn');
			            localStorage.removeItem('username');
			            elements.loginPage.classList.remove('hidden');
			            elements.welcomePage.classList.add('hidden');
			            resetLoginForm();
			        }
			
			        // 页面切换函数
			        function handlePageChange(e) {
			            const targetPage = e.target.getAttribute('data-target');
			            elements.pages.forEach(page => page.classList.remove('active'));
			            document.getElementById(targetPage).classList.add('active');
			        }
			
			        // 设置切换函数
			        function handleSettingsChange(e) {
			            const targetPage = e.target.getAttribute('data-target');
			            elements.pages.forEach(page => page.classList.remove('active'));
			            document.getElementById(targetPage).classList.add('active');
			        }
			
			        // 修改密码函数
			        function handleNewPassword() {
			            const newPassword = document.getElementById('newPassword').value;
			            if (newPassword.length < 6) {
			                return showMessage("新密码至少6位！", "red");
			            }
			
			            const username = localStorage.getItem('username');
			            if (validCredentials[username]) {
			                validCredentials[username].password = newPassword; // 更新存储在内存中的密码
			                showMessage("密码修改成功！", "green");
			            }
			            document.getElementById('newPassword').value = ''; // 清空输入框
			        }
			
			        // 更新欢迎信息
			        function updateWelcomeInfo(username) {
			            elements.loginPage.classList.add('hidden');
			            elements.welcomePage.classList.remove('hidden');
			            elements.welcomeUsername.textContent = username;
			            elements.profileUsername.textContent = username;
			            elements.profileEmail.textContent = validCredentials[username].email;
			        }
			 
			        // 重置登录表单
			        function resetLoginForm() { 
			            elements.usernameInput.value = '';
			            elements.passwordInput.value = '';
			            elements.messageBox.innerHTML = '';
			        }
			
			        // 显示消息 
			        function showMessage(message, color) {
			            elements.messageBox.textContent = message;
			            elements.messageBox.style.color = color;
			        }
		</script>
	</body>

</html>